<template>
    <div>
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
            <span class="iconfont header-back-icon">&#xe658;</span>
        </router-link>
        <div class="header" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
                <span class="iconfont back-icon">&#xe658;</span>
            </router-link>
            城市选择
        </div>
    </div>
</template>
<script>
import CommonGallary from '@/common/gallary/Gallary.vue'
export default {
    name:'DetailHeader',
    data () {
        return {
            showAbs:true,
            opacityStyle: {opacity:0}
        }
    },
    methods:{
        handleScroll () {
            const scrollValue = document.documentElement.scrollTop
            if (scrollValue > 60){
                this.showAbs = false
                const opacity = scrollValue / 140
                this.opacityStyle = {opacity}
            } else {
                this.showAbs = true
            }
        }
    },
    activated () {
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated () {
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>
<style lang="stylus" scoped>
    .header-abs
        position:absolute
        left: .3rem
        top: .2rem
        width: .6rem
        height: .6rem
        line-height:.6rem
        background-color:#000
        border-radius: .3rem    
        .header-back-icon
            color:#fff
            font-size:.6rem
    .header 
        position:fixed
        background-color: #00bcd4;
        height: 0.7rem;
        line-height: 0.7rem;
        text-align: center;
        color: #fff;
        font-size: 0.3rem;
        top:0
        left:0
        right: 0
        .back-icon
            position:absolute
            left:0
            top:0
            font-size:.5rem
            color:#fff
            
</style>
